<template>
    <el-form :inline="true" class="demo-form-inline">
        <el-form-item>
            <el-input class="exchange-input" style="width:480px; height: 40px;" />
        </el-form-item>
        <el-form-item stye="margin-left:1px">
            <el-button class="el-button">兑换</el-button>
        </el-form-item>
        <div class="exchange-container">
            <div class="link-button">
                <span >
                    <a style="text-decoration: none; color: black" href="">领券中心</a>
                </span>
                <span>
                    <a style="text-decoration: none; color: black" href="">历史优惠券</a>
                </span>
            </div>
        </div>
        <div class="coupon-tips">* 优惠券仅用于线下课</div>
        <div style="padding: 0px 30px;">
            <div class="table_paging" style="min-height: 200px; text-align: center;">
                <div style=" font-size: 14px;">暂无数据</div>
            </div>
        </div>
    </el-form>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
    name: "Coupons",
});
</script>

<script setup lang="ts"></script>

<style scoped lang="less">
.demo-form-inline {
    width: 1020px;
    height: 360px;

    .exchange-input {
        margin-top: 15px;
    }

    .el-button {
        width: 100px;
        height: 40px;
        background-color: deeppink;
        border-radius: 10%;
        margin-top: 13px;
        color: #fff;
    }

    .exchange-container {

        .link-button {
            float: right;
            width: 240px;
            height: 40px;
            margin-top: -50px;
            font-size: 12px;
            margin-right: 80px;

            span {
                margin-left: 20px;
            }
        }
    }

    .coupon-tips {
        margin-top: 5px;
        font-size: 12px;
        color: #dba059;
    }
}
</style>
